<template>
    <el-row>
        <el-col :span="10" style="min-height: 30vh;">
            <div style="text-align: center;">
                <el-avatar :size="200" :src="$store.state.User.photo" />
                <div>{{ $store.state.User.name }}</div>
                <el-select v-model="botId" placeholder="出战BOT" size="large" style="width: 200px" :disabled='matching'>
                    <el-option v-for="item in botList" :key="item" :label="item.title" :value="item.id" />
                </el-select>
            </div>
        </el-col>
        <el-col :span="4" style="background-image: url('https://pic.rmb.bdstatic.com/14725112cf14d7d50569840f0e2b07c1.jpeg@c_1,w_1395,h_1011,x_95,y_287');
            background-size: contain; background-repeat: no-repeat;">
        </el-col>
        <el-col :span="10">
            <div style="text-align: center;">
                <el-avatar :size="200" :src="$store.state.Pk.opponentPhoto" />
                <div>{{ oppoName }}</div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-button type="primary" @click="start()" style="width: 20%;margin:50px auto 0px auto"
            v-if="btState == '开始匹配'">
            开始匹配
        </el-button>
        <el-button type="primary" @click="cancel()" style="width: 20%;margin:50px auto 0px auto"
            v-else-if="btState == '取消匹配'">
            取消匹配
        </el-button>
        <div v-else style="text-align: center;margin: 50px auto 0px auto;">
            匹配成功
        </div>
    </el-row>
    <div style="text-align: center;"
        :style="{ visibility: btState == '开始匹配' || btState == '匹配成功' ? 'hidden' : 'visible' }">
        已匹配：{{ second }}秒 <el-icon>
            <i class="iconfont icon-jiazai"></i>
        </el-icon>
    </div>
    <div style="text-align: center;" :style="{ visibility: btState == '匹配成功' ? 'visible' : 'hidden' }">
        等待进入：{{ second }}
    </div>
</template>

<script>
import $ from 'jquery';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useStore } from 'vuex';

export default {
    name: "matchingComponents",

    setup() {
        let store = useStore();
        let botName = ref();
        let botList = ref([
            {
                id: 0,
                title: "亲自上阵",
            }
        ])
        let btState = ref("开始匹配");
        let second = ref(0);
        let timer = null;
        let matching = ref(false);
        let botId = ref("");
        let oppoName = ref('对手');

        let start = () => {
            console.log(botId.value);
            if (botId.value === "" && btState.value === '开始匹配') {
                ElMessage.error('请选择进行对战的BOT');
                return;
            }
            matching.value = true;
            if (btState.value == "开始匹配") {
                btState.value = "取消匹配";
                timer = setInterval(() => {
                    second.value++;
                }, 1000)
            }
            else btState.value = "开始匹配";
            store.state.Pk.socket.send(JSON.stringify({//通过wss像后端发送信息，在onmessage中接收
                event: "start",
                botId: botId.value,
            }));
        }
        let cancel = () => {
            matching.value = false;
            if (btState.value == "开始匹配") {
                btState.value = "取消匹配";
            }
            else btState.value = "开始匹配";
            clearInterval(timer);
            second.value = 0;
            store.state.Pk.socket.send(JSON.stringify({
                event: "stop"
            }));
        }
        let getRobot = () => {
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3000/robotCRUD/allRobot/",
                cache: false,
                async: false,
                headers: {
                    "satoken": store.state.User.token,
                },
                success(resp) {
                    for (let i of resp) {
                        botList.value.push(i);
                    }
                }
            })
        }
        let update = () => {
            oppoName.value = store.state.Pk.opponentName;
        }
        let wait3 = () => {
            btState.value = '匹配成功';
            second.value = 0;
            clearInterval(timer);
            timer = setInterval(() => {
                second.value++;
            }, 1000)
        }
        getRobot();
        return {
            start,
            cancel,
            update,
            wait3,

            botId,
            oppoName,
            matching,
            second,
            btState,
            botList,
            botName,
            store,
        }
    }
}

</script>

<style scoped>
.el-icon {
    animation: spin 1s linear infinite;
}

/* 旋转 */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>
